<template>
	<view class="cate">
		<search-slot>
			<template #left>
				<view class="search-xiaoxi text-center">
					<text class="iconfont icon-xiaoxi search-size"></text>
				</view>
			</template>
			<template #center>
				<view class="search-search flex-1 text-muted" @click="goSearch">请输入搜索内容</view>
			</template>
			<template #right>
				<view class="search-saoma text-center" @click="getScanCode">
					<text class="iconfont icon-saoma search-size"></text>
				</view>
			</template>
		</search-slot>

		<view class="d-flex">
			<view class="span-5">
				<scroll-view scroll-y="true" :style="'height:'+scrollH" :scroll-into-view="scrollIntoLeft"
					scroll-with-animation>
					<view v-for="(item,i) in cate" :key="i" :id="'tableft'+i"
						class="d-flex a-center span-20 left-height j-center" :class="currentIndex==i?'action':''"
						@click="setclass(i)">{{item.name}}</view>
				</scroll-view>
			</view>
			<view class="span-15">
				<scroll-view scroll-y="true" :style="'height:'+scrollH" :scroll-into-view="scrollIntoRight"
					scroll-with-animation @scroll="scrollRight">
					<view v-for="(item,j) in cate" :key="j" class="d-flex flex-wrap right-item" :id="'tabright'+j">
						<view v-for="(category,v) in item.app_category_items" :key="v" class=" span24-8 text-center">
							<image :src="category.cover"></image>
							<view>{{category.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCate
	} from '../../api/index.js'
	export default {
		data() {
			return {
				scrollH: 0,
				cate: [],
				currentIndex: 0,
				scrollIntoLeft: '',
				scrollIntoRight: '',
				scrollTop: 0,
				rightTop: []
			}
		},
		onLoad() {
			uni.getSystemInfo({
					success: (e) => {
						this.scrollH = e.windowHeight - uni.upx2px(88) + 'px'
					}
				}),
				this.getcate()
		},
		mounted() {
			setTimeout(() => {
				this.init()
			}, 1000)
		},
		methods: {
			setclass(i) {
				this.currentIndex = i
				this.scrollIntoRight = 'tabright' + i
			},
			getcate() {
				getCate().then(res => {
					console.log('res', res);
					this.cate = res.data
				})
			},
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".right-item").boundingClientRect((data) => {
						data.map((v, i) => {
							let top = i > 0 ? this.rightTop[i - 1] : 0
							top += v.height;
							this.rightTop.push(top)
							console.log(this.rightTop)
						})
					})
					.exec();
			},
			scrollRight(e) {
				this.scrollTop = e.detail.scrollTop;
				let index=this.rightTop.findIndex(item=>{
				return	item>=this.scrollTop+1
				})
				console.log('index',index);
				this.scrollIntoLeft='tableft'+index
				this.currentIndex=index
				this.scrollIntoRight=null;
			}
		}
	}
</script>

<style scoped>
	.search-saoma,
	.search-xiaoxi {
		width: 44rpx;
		height: 44rpx;
	}

	.search-search {
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 20rpx;
		background-color: #f0f0f0;
		border-radius: 15rpx;
		font-size: 24rpx;
	}

	.left-height {
		height: 120rpx;
	}

	.right-item image {
		width: 80rpx;
		height: 120rpx;
	}

	.right-item:last-child {
		padding-bottom: 80vh;
	}
</style>